<template>
  <div class="person">
    <h1>需求：水温达到60℃，或水位达到80cm，则联系服务器</h1>
    <h2>当前水温为： {{temp}}摄氏度</h2>
    <h2>当前水位为： {{height}}厘米</h2>
    <button @click="changeTemp">水温 + 10</button>
    <button @click="changeHeight">水位 + 10</button>
  </div>

</template>

<script setup lang="ts" name="Person">
import { ref, watch, watchEffect} from 'vue'
  //数据
  let temp = ref(10)
  let height = ref(0)
  //方法
  function changeTemp() {
    temp.value += 10
  }

  function changeHeight() {
    height.value += 10
  }

  // 监视
  // watch([temp,height],(newValue)=>{
  //   // console.log('数据发生变化',newValue)
  //   //从value中获取最新的水温（newTemp） 水位（newHeight）
  //   const [newTemp, newHeight] = newValue
  //   // console.log('数据发生变化',newTemp, newHeight)
  //   if(newTemp >=60 || newHeight >=80) {
  //     console.log("联系服务器")
  //   }
  // })


  // 监视 watchEffect实现
  watchEffect(()=> {
    console.log('@')
    if(temp.value >= 60 || height.value >=80){
      console.log("联系服务器")
    }
  })
</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>